import React from 'react';
import { Input } from 'antd';

const { TextArea } = Input;

const ItemTextArea = (props) => {
  const { className = '', label = '', required = false, value, onChange, onBlur, validate } = props;
  const { valid, msg } = validate ? validate(value) : { valid: true };
  return (
    <div className={className}>
      <div className={`item__lable ${required ? 'item__lable_required' : ''}`}>{label}</div>
      <TextArea
        value={value}
        placeholder={`请输入${label}`}
        rows={4}
        onChange={ev => { if (onChange) onBlur(ev.target.value); }}
        onBlur={ev => { if (onBlur) onBlur(ev.target.value); }}
        style={{...(
          valid ? {} : { borderColor: '#f5222d' }
        )}}
      />
      { !valid ? (
        <div style={{fontSize: 12, color: "#f5222d"}}>{msg}</div>
      ) : null
      }
    </div>
  );
}
export default ItemTextArea;